<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-24 15:03:20
 *@描述:医院整体运营指标
!-->
<template>
  <div class="page-tile-4">
    <!-- :style="{
				borderRight: titleList.length > 3 ? '0' : '2px solid #000'
			}" -->
    <div class="page-tile-4-left">
      <div class="page-tile-4-left-line-title-box">
        <div
          class="page-tile-4-left-line-title"
          :style="{
            justifyContent: item.direction ? item.direction : 'center',
            paddingLeft: item.paddingLeft,
            width: item.width != null ? item.width + '%' : (100 - titleList[0].width - titleList[1].width) / (titleList.length - 2) + '%',
          }"
          v-for="(item, index) in titleList"
          :key="index"
        >
          {{ item.titleName }}
        </div>
      </div>
      <div class="page-tile-4-left-line-content-box">
        <div class="page-tile-4-left-line-content" v-for="(item, index) in typeData" :key="index">
          <div
            class="type-name"
            :style="{
              width: titleList[0].width + '%',
              padding: titleList[0].width / 2 - 1 + '%',
            }"
          >
            {{ item.typeName }}
          </div>
          <div
            class="type-data"
            :style="{
              borderRight: itemData.proportion ? '2px solid #000' : '2px solid #000',
              width: itemData.width != null ? itemData.width + '%' : (100 - titleList[0].width - titleList[1].width) / (titleList.length - 2) + '%',
            }"
            v-for="itemData in titleList.filter(item => item.titleName !== '大类')"
          >
            <div
              class="type-data-item"
              :style="{
                justifyContent: itemData.direction ? itemData.direction : 'center',
                paddingLeft: itemData.paddingLeft,
              }"
              v-for="(typeDataItem, typeDataIndex) in item.itemTypeList"
              :key="typeDataIndex"
            >
              {{ typeDataItem[itemData.titleName] }}
              <div v-if="itemData.proportion" class="proportion-box">
                <i
                  class="iconfont icon-xiajiangjianshao proportion-img"
                  :style="{
                    color: colorFn(itemData.colorIndex, typeDataItem),
                  }"
                  v-if="stateFn(itemData.titleName, typeDataItem).stateShow"
                >
                  &#xe83f;
                </i>
                <i
                  class="iconfont icon-shangshengzengjia proportion-img"
                  :style="{
                    color: colorFn(itemData.colorIndex, typeDataItem),
                  }"
                  v-else
                >
                  &#xe83e;
                </i>
                <div style="margin-top: -10px">
                  {{ stateFn(itemData.titleName, typeDataItem).stateValue }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-tile-4-right">
      <div class="page-tile-4-right-echarts-box">
        <div class="item-echarts-name">入组总病例数(例)</div>
        <div class="item-echarts-class" ref="pageTitle4RightRefs1"></div>
      </div>
      <div class="page-tile-4-right-echarts-box">
        <div class="item-echarts-name">总结余金额(万元)</div>
        <div class="item-echarts-class" ref="pageTitle4RightRefs2"></div>
      </div>
      <div class="page-tile-4-right-echarts-box">
        <div class="item-echarts-name">次均结余金额(元)</div>
        <div class="item-echarts-class" ref="pageTitle4RightRefs3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  // 组件名称
  name: 'pageTile4',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      titleList: [],
      typeData: [],
      dataList: [],
      typeValue: '',
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data) {
      if (data.data_list.length === 0) return;
      this.dataList = data.data_list;
      let lineData = Object.keys(this.dataList[0]).filter(item => item !== '大类' && item !== '指标' && !item.includes('同比'));
      //标题
      this.titleList = [
        {
          titleName: '大类',
          width: 10,
        },
        {
          titleName: '指标',
          width: 30,
          direction: 'left',
          paddingLeft: '20px',
        },
      ];
      this.typeData = [];
      //数据
      let i = 0;
      lineData.forEach(item => {
        let proportion = Object.keys(this.dataList[0]).some(item1 => item1.includes('同比') && item1.slice(5).includes(item));
        if (proportion) i += 1;
        this.titleList.push({
          titleName: item,
          // direction: "left",
          // paddingLeft: "20px",
          proportion,
          colorIndex: proportion ? i : null,
        });
      });
      //大类列表
      let typeList = [];
      this.dataList.forEach(item => {
        if (typeList.indexOf(item['大类']) === -1) typeList.push(item['大类']);
      });
      typeList.forEach(item => {
        this.typeData.push({
          typeName: item,
        });
      });
      this.typeData.forEach(item => {
        item.itemTypeList = [];
        this.dataList.forEach(item1 => {
          if (item.typeName === item1['大类']) {
            item.itemTypeList.push(item1);
          }
        });
      });
      this.initEchart(lineData);
    },
    //颜色匹配
    colorFn(colorIndex, item) {
      if (colorIndex == 1) {
        return item['同比一颜色'];
      } else if (colorIndex == 2) {
        return item['同比二颜色'];
      } else {
        return '#000';
      }
    },
    initEchart(lineData) {
      let myChart1 = echarts.init(this.$refs.pageTitle4RightRefs1);
      let myChart2 = echarts.init(this.$refs.pageTitle4RightRefs2);
      let myChart3 = echarts.init(this.$refs.pageTitle4RightRefs3);
      let option1;
      option1 = {
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            show: true,
            fontSize: 18,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#8e8e8e',
          },
        },
        series: [
          {
            data: [],
            type: 'bar',
            label: {
              show: true,
              fontSize: 18,
              position: 'top',
              formatter: '{c}例',
            },
            itemStyle: {
              color: function (params) {
                // 判断数据值是正数还是负数
                if (params.value >= 0) {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: ' #5470c6', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#5470c6', // 结束颜色
                      },
                    ],
                  }; // 正数的颜色为红色
                } else {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: '#ee6666', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#ee6666', // 结束颜色
                      },
                    ],
                  }; // 负数的颜色为绿色
                }
              },
            },
          },
        ],
      };
      let option2;
      option2 = {
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            show: true,
            fontSize: 18,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#8e8e8e',
          },
        },
        series: [
          {
            data: [],
            type: 'bar',
            label: {
              show: true,
              fontSize: 18,
              position: 'top',
              formatter: '{c}万元',
            },
            itemStyle: {
              color: function (params) {
                // 判断数据值是正数还是负数
                if (params.value >= 0) {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: ' #5470c6', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#5470c6', // 结束颜色
                      },
                    ],
                  }; // 正数的颜色为红色
                } else {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: '#ee6666', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#ee6666', // 结束颜色
                      },
                    ],
                  }; // 负数的颜色为绿色
                }
              },
            },
          },
        ],
      };
      let option3;
      option3 = {
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            show: true,
            fontSize: 18,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#8e8e8e',
          },
        },
        series: [
          {
            data: [],
            type: 'bar',
            label: {
              show: true,
              fontSize: 18,
              position: 'top',
              formatter: '{c}元',
            },
            itemStyle: {
              color: function (params) {
                // 判断数据值是正数还是负数
                if (params.value >= 0) {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: ' #5470c6', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#5470c6', // 结束颜色
                      },
                    ],
                  }; // 正数的颜色为红色
                } else {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: '#ee6666', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#ee6666', // 结束颜色
                      },
                    ],
                  }; // 负数的颜色为绿色
                }
              },
            },
          },
        ],
      };
      let filterList = this.dataList.filter(item => item['指标'] === '入组总病例数（例）' || item['指标'] === '总结余金额（万元）' || item['指标'] === '次均结余金额（元）');
      filterList.forEach(item => {
        if (item['指标'] === '入组总病例数（例）') {
          lineData.forEach(key => {
            option1.xAxis.data.push(key);
            option1.series[0].data.push(item[key]);
          });
        }
        if (item['指标'] === '总结余金额（万元）') {
          lineData.forEach(key => {
            option2.xAxis.data.push(key);
            option2.series[0].data.push(item[key]);
          });
        }
        if (item['指标'] === '次均结余金额（元）') {
          lineData.forEach(key => {
            option3.xAxis.data.push(key);
            option3.series[0].data.push(item[key]);
          });
        }
      });
      option1 && myChart1.setOption(option1);
      option2 && myChart2.setOption(option2);
      option3 && myChart3.setOption(option3);
    },
    stateFn(item, typeDataItem) {
      for (const key in typeDataItem) {
        if (key.includes('同比') && key.slice(5).includes(item)) {
          return {
            stateValue: typeDataItem[key] + '%',
            stateShow: typeDataItem[key] < 0 ? true : false,
          };
        }
      }
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-tile-4 {
  display: flex;
  height: 100%;
  .page-tile-4-left {
    width: 54%;
    font-size: 1.3rem;
    border: 2px solid #000;
    .page-tile-4-left-line-title-box {
      display: flex;
      height: 5%;
      border-bottom: 2px solid #000;
      .page-tile-4-left-line-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #fff;
        background: #4874cb;
        text-align: center;
        border-right: 2px solid #000;
        &:last-child {
          border-right: 0 solid #000;
        }
      }
    }
    .page-tile-4-left-line-content-box {
      display: flex;
      flex-direction: column;
      height: 95%;
      .page-tile-4-left-line-content {
        display: flex;
        flex: 1;
        border-bottom: 2px solid #000;
        &:last-child {
          border-right: 0 solid #000;
          border-bottom: 0 solid #000;
        }
        .type-name {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          background: #4874cb;
          border-right: 2px solid #000;
        }
        .type-data {
          display: flex;
          flex-direction: column;
          &:last-child {
            border-right: 0 solid #000 !important;
          }
          .type-data-item {
            position: relative;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 2px solid #000;
            &:last-child {
              border-bottom: 0 solid #000;
            }
            .proportion-box {
              position: absolute;
              right: 3%;
              top: -5px;
              margin-left: 5px;
              width: 50px;
              height: 50px;
              font-size: 14px;
              text-align: center;
              .proportion-img {
                margin-bottom: -20px;
                font-size: 24px;
              }
            }
          }
        }
      }
    }
  }
  .page-tile-4-right {
    padding: 2%;
    margin-left: 2%;
    width: 44%;
    border: 2px solid #4874cb;
    .page-tile-4-right-echarts-box {
      position: relative;
      margin-bottom: 70px;
      width: 100%;
      height: 30%;
      text-align: center;
      .item-echarts-class {
        width: 100%;
        height: 100%;
      }
      .item-echarts-name {
        position: absolute;
        top: -5%;
        right: 50%;
        transform: translateX(50%);
        font-size: 1.5rem;
      }
    }
  }
}
</style>
